<template>
  <div class="accountList">
    <div class="searchBox">
      <el-form :model="searchForm" ref="searchFormRef">
        <el-row>
          <el-form-item prop="orderSn">
            <div class="item">
              <span v-html="'订单编号'" class="nameSpan"></span>
              <el-input
                size="mini"
                v-model="searchForm.orderSn"
                placeholder="请输入订单编号"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <div class="item">
              <span v-html="'姓名'" class="nameSpan"></span>
              <el-input
                size="mini"
                v-model="searchForm.userName"
                placeholder="请输入姓名"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="phone">
            <div class="item">
              <span v-html="'手机号'" class="nameSpan"></span>
              <el-input
                size="mini"
                v-model="searchForm.phone"
                placeholder="请输入手机号"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="planId">
            <div class="item">
              <span v-html="'套餐'" class="nameSpan"></span>
              <el-select filterable 
                clearable
                v-model="searchForm.planId"
                placeholder="请选择套餐"
                size="mini"
              >
                <el-option
                  v-for="item in plans"
                 :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item prop="payChannelList">
            <div class="item">
              <span v-html="'支付方式'" class="nameSpan"></span>
              <el-select filterable 
              multiple 
                clearable
                v-model="searchForm.payChannelList"
                placeholder="请选择审核状态"
                size="mini"
              >
                <el-option
                  v-for="item in payOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item prop="orderStatusList">
            <div class="item">
              <span v-html="'订单状态'" class="nameSpan"></span>
              <el-select filterable 
                clearable
                multiple
                v-model="searchForm.orderStatusList"
                placeholder="请选择订单状态"
                size="mini"
              >
                <el-option
                  v-for="item in orderOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item prop="invoiceStatus">
            <div class="item">
              <span v-html="'开票状态'" class="nameSpan"></span>
              <el-select filterable 
                clearable
                v-model="searchForm.invoiceStatus"
                placeholder="请选择开票状态"
                size="mini"
              >
                <el-option
                  v-for="item in invoiceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item prop="payerName">
            <div class="item">
              <span v-html="'付款方名称'" class="nameSpan"></span>
              <el-input
                size="mini"
                v-model="searchForm.payerName"
                placeholder="请输入付款方名称"
              ></el-input>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="item">
              <span v-html="'下单时间'" class="nameSpan"></span>
              <el-date-picker
                size="mini"
                class="dataPicker"
                v-model="searchForm.startTime"
                type="datetime"
                placeholder="下单开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions0"
                default-time="08:00:00"
              >
              </el-date-picker>
              <span style="color: #d9d9d9">-</span>

              <el-date-picker
                size="mini"
                class="dataPicker"
                v-model="searchForm.endTime"
                type="datetime"
                placeholder="下单截止"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions1"
                default-time="08:00:00"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item prop="businessAdminId">
            <div class="item">
              <span v-html="'专属业务员'" class="nameSpan"></span>
              <el-select filterable 
                clearable
                v-model="searchForm.businessAdminId"
                placeholder="请选择专属业务员"
                size="mini"
              >
                <el-option
                  v-for="item in salesmansList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="searchClick"
              icon="el-icon-search"
              type="primary"
              size="mini"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetClick"
              >重置</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="custom-style">
      <el-button
        style="margin-right: 10px"
        type="primary"
        size="mini"
        v-has="'orderMenu:order:listExport'"
        @click="orderDownloadClick()"
        >导出</el-button
      >
      <el-popover placement="bottom-start" width="200" trigger="click">
        <el-checkbox-group v-model="checkedCities">
          <el-checkbox
            @change="saveCustom"
            v-for="(item, index) in cities"
            :label="item"
            :key="index"
            style="display: block; padding-top: 10px; margin-left: 27px"
            >{{ item }}</el-checkbox
          >
        </el-checkbox-group>

        <el-button type="primary" slot="reference" size="small"
          >自定义列表</el-button
        >
      </el-popover>
    </div>
    <div class="tableBox" ref="tableBoxRef">
      <el-table
       :height="560"
        v-loading="tableLoading"
        :header-cell-style="{
          background: '#F8F8F8',
          color: '#333',
          fontSize: '16px',
          fontWeight: '700',
        }"
        border
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          v-if="checkedCities.includes('订单编号')"
          prop="orderSn"
          align="center"
          label="订单编号"
        >
        </el-table-column>
        <el-table-column
          v-if="checkedCities.includes('客户信息')"
          align="center"
          label="客户信息"
          width="200"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.companyName }}</div>
            <div>{{ scope.row.userName }}</div>
            <div>{{ scope.row.userPhone }}</div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="checkedCities.includes('下单时间')"
          prop="createTime"
          align="center"
          label="下单时间"
        >
          <template slot-scope="scope">{{
            scope.row.createTime | formatDate
          }}</template>
        </el-table-column>
        <el-table-column
          v-if="checkedCities.includes('金额')"
          prop="totalFee"
          align="center"
          label="金额"
        >
        </el-table-column>
        <el-table-column
          v-if="checkedCities.includes('套餐类型')"
          prop="userPlanName"
          align="center"
          label="套餐类型"
        >
        </el-table-column>
        <el-table-column
          v-if="checkedCities.includes('套餐金额')"
          prop="totalFee"
          align="center"
          label="套餐金额"
        >
        </el-table-column>
        <el-table-column
          v-if="checkedCities.includes('订单状态')"
          prop="orderStatus"
          align="center"
          label="订单状态"
        >
          <template slot-scope="scope">
            <div>
              {{ orderFormatter[scope.row.orderStatus] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="checkedCities.includes('支付方式')"
          prop="payChannel"
          align="center"
          label="支付方式"
        >
          <template slot-scope="scope">
            <div>
              {{ payFormatter[scope.row.payChannel] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="checkedCities.includes('支付时间')"
          prop="payTime"
          align="center"
          label="支付时间"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.payTime">
              {{ scope.row.payTime | formatDate }}
            </div>
          </template>
        </el-table-column>
         <el-table-column
          v-if="checkedCities.includes('到期时间')"
          prop="endTime"
          align="center"
          label="到期时间"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.endTime">
              {{ scope.row.endTime | formatDate }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="checkedCities.includes('专属业务员')"
          prop="businessAdminName"
          align="center"
          label="专属业务员"
        >
        </el-table-column>
        <el-table-column
          v-if="checkedCities.includes('付款方名称')"
          prop="payerName"
          align="center"
          label="付款方名称"
        >
        </el-table-column>
        <el-table-column
          v-if="checkedCities.includes('开票资料')"
          align="center"
          label="开票资料"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.invoiceStatus == 3||scope.row.invoiceStatus == 1">
              <el-button
                v-has="'orderMenu:order:readInvoice'"
                type="text"
                @click="changeInvoice(scope.row.salesOrderId)"
                >查看</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="checkedCities.includes('开票状态')"
          prop="invoiceStatus"
          align="center"
          label="开票状态"
        >
          <template slot-scope="scope">
            <div>
              {{ invoiceFormatter[scope.row.invoiceStatus] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="checkedCities.includes('备注')"
          prop="remark"
          align="center"
          label="备注"
        >
        </el-table-column>
        <el-table-column
          v-if="checkedCities.includes('收款凭证')"
          :show-overflow-tooltip="true"
          align="center"
          label="收款凭证"
          prop="proofUrl"
          width="100"
        >
          <template slot-scope="scope" v-if='scope.row.proofUrl'>
            <el-popover placement="left" trigger="click">
              <img
                :src="scope.row.proofUrl"
                width="500px"
                @mousewheel="rollImg(this, scope.row.proofUrl)"
                ref="bigImage"
              />
              <img
                slot="reference"
                :src="scope.row.proofUrl"
                :alt="scope.row.proofUrl"
                style="
                  height: 60px;
                  width: 60px;
                  cursor: pointer;
                "
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              v-has="'orderMenu:order:readLog'"
              @click="changeLog(scope.row.salesOrderId)"
              >查看日志</el-button
            >
            <el-button
              v-if="scope.row.orderStatus == 0"
              size="mini"
              type="text"
              v-has="'orderMenu:order:cancel'"
              @click="changeCacel(scope.row)"
              >取消订单</el-button
            >
            <el-button
              v-if="scope.row.orderStatus == 1"
              size="mini"
              type="text"
              v-has="'orderMenu:order:refund'"
              @click="changeRefund(scope.row)"
              >线下退款</el-button
            >
   
            <el-button
              v-if="scope.row.orderStatus == 0 && scope.row.payChannel == 4"
              size="mini"
              type="text"
              v-has="'orderMenu:order:confirmPaid'"
              @click="changeReceive(scope.row)"
              >确认收款</el-button
            >
            <el-button
              v-if="scope.row.orderStatus == 1 && scope.row.invoiceStatus == 3"
              size="mini"
              type="text"
              v-has="'orderMenu:order:confirmInvoice'"
              @click="changeTicket(scope.row)"
              >确认开票</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-card class="footer" v-if="total > 0">
        <div>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[15, 30, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <el-dialog :close-on-click-modal="false" 
      title="开票资料"
      :visible.sync="dialogVisible"
      width="400px"
      :before-close="handleClose"
      class="addEditAccountDialog"
    >
      <div class="content">
        <div>
          收票单位：<span style="color: #000">
            {{ titleTypeFormatter[detailData.titleType] }}
          </span>
        </div>
        <div>
          发票类型：<span style="color: #000">
            {{ invoiceTypeFormatter[detailData.invoiceType] }}
          </span>
        </div>
        <div>
          发票抬头：<span style="color: #000">{{ detailData.title }}</span>
        </div>
        <div v-if="detailData.titleType == 1">
          <div>
            税号：<span style="color: #000">{{ detailData.number }}</span>
          </div>
          <div>
            注册地址：<span style="color: #000">{{ detailData.address }}</span>
          </div>
          <div>
            开户银行：<span style="color: #000">{{ detailData.bank }}</span>
          </div>

          <div>
            银行账号：<span style="color: #000">{{
              detailData.bankAccount
            }}</span>
          </div>
          <div>
            注册电话：<span style="color: #000">{{ detailData.phone }}</span>
          </div>
        </div>
        <div>
          收票人邮箱：<span style="color: #000">{{ detailData.email }}</span>
        </div>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" 
      title="查看日志"
      :visible.sync="dialogVisibleLog"
      width="800px"
      :before-close="handleCloseLog"
      class="addEditAccountDialog"
    >
      <div class="contentLog">
        <el-table :data="tableDataLog" style="width: 100%">
          <el-table-column prop="optDesc" label="操作类型" width="100px">
          </el-table-column>
          <el-table-column prop="remark" label="备注"> </el-table-column>
          <el-table-column prop="createByName" label="操作人" width="100px">
          </el-table-column>
          <el-table-column prop="createTime" label="操作时间">
            <template slot-scope="scope">{{
              scope.row.createTime | formatDate
            }}</template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" 
      @open="refundDialogOpen"
      :title="dialogTitle"
      :visible.sync="dialogVisibleRefund"
      width="400px"
      :before-close="handleCloseRefund"
      class="addEditAccountDialog"
    >
      <div class="contentRefund">
        <div style="margin-bottom: 10px">备注*</div>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入备注"
          v-model="refundData.remark"
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseRefund">取 消</el-button>
        <el-button type="primary" @click="saveRefund">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" 
      @open="receiveDialogOpen"
      title="确认收款"
      :visible.sync="dialogVisibleReceive"
      width="400px"
      :before-close="handleCloseReceive"
      class="addEditAccountDialog"
    >
      <div class="contentRefund"   v-loading="loading"
    element-loading-text="图片上传中,请稍等"
    >
        <div style="margin-bottom: 10px">上传凭证*</div>
        <div class="item">
          <el-upload
            accept=".jpg,.jpeg,.png,.JPG,.JPEG,.gif"
            ref="uploadrefss"
            :before-upload="beforeUpload"
            :action="$uploadUrl + '/2'"
            :limit="1"
             :on-exceed="handleExceed"
            :headers="postHead"
            :on-success="handleProductPicSuccess"
            :on-remove='handelRemove'
          >
            <el-button size="small" type="primary">上传图片</el-button>
          </el-upload>
           
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseReceive">取 消</el-button>
        <el-button type="primary" :disabled='loading' @click="saveReceive">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" 
      title="确认开票"
      :visible.sync="dialogVisibleTicket"
      width="400px"
      :before-close="handleCloseTicket"
      class="addEditAccountDialog"
    >
      <div style="height: 10vh;
  overflow-x: hidden;">
        <div style="margin-bottom: 10px">
          请核对开票信息后进行开票操作，确定已经开票了吗？
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseTicket">取 消</el-button>
        <el-button type="primary" @click="saveTicket">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      loading:true,
      postHead: { token: localStorage.token },
      orderFormatter: {
        0: "待支付",
        1: "支付成功",
        8: "已退款",
        9: "已失效",
        10: "已取消",
        11: "已过期",
      },
      payFormatter: {
        1: "微信小程序",
        2: "微信",
        3: "支付宝",
        4: "对公打款",
      },
      invoiceFormatter: {
        0: "待开票",
        1: "已开票",
        2: "无需开票",
        3: "待确认",
      },
      titleTypeFormatter: {
        1: "企业",
        2: "个人",
      },
      invoiceTypeFormatter: {
        1: "增值税专用发票",
        2: "增值税普通发票",
      },
      checkedCities: [],
      cities: [
        "订单编号",
        "客户信息",
        "下单时间",
        "套餐类型",
        "金额",
        "订单状态",
        "支付方式",
        "支付时间",
        "到期时间",
        "专属业务员",
        "付款方名称",
        "开票资料",
        "开票状态",
        "备注",
        "收款凭证",
      ],
      payOptions: [
        { label: "微信小程序", value: 1 },
        { label: "微信", value: 2 },
        { label: "支付宝", value: 3 },
        { label: "对公打款", value: 4 },
      ],
      orderOptions: [
        { label: "待支付", value: 0 },
        { label: "支付成功", value: 1 },
        { label: "已退款", value: 8 },
        { label: "已失效", value: 9 },
        { label: "已取消", value: 10 },
        { label: "已过期", value: 11 },
      ],
      invoiceOptions: [
        { label: "待开票", value: 0 },
        { label: "已开票", value: 1 },
        { label: "无需开票", value: 2 },
        { label: "待确认", value: 3 },
      ],
      dialogVisible: false,
      pickerOptions0: {
        disabledDate: (time) => {
          //如果选择了结束时间返回的时间就要不能大于开始时间并且当前之前的时间也不可以选择
          if (this.searchForm.endTime) {
            return (
              time.getTime() > new Date(this.searchForm.endTime).getTime() ||
              time.getTime() < Date.now() - 8.64e7
            );
          }
        },
      },
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.searchForm.startTime) {
            return (
              time.getTime() <
              new Date(this.searchForm.startTime).getTime() -
                1 * 24 * 60 * 60 * 1000
            ); //可以选择同一天
          }
        },
      },
      searchForm: {
        orderSn: null,
        userName: null,
        phone: null,
        planId: null,
        payChannelList: null,
        orderStatusList: null,
        invoiceStatus: null,
        payerName: null,
        startTime: "",
        endTime: "",
        businessAdminId: null,
      },
      tableLoading: false,
      tableHeight: 50,
      tableData: [],
      pageNum: 1,
      pageSize: 15,
      total: 0,
      detailData: {},
      dialogVisibleLog: false,
      tableDataLog: [],
      dialogVisibleRefund: false,
      refundData: {
        salesOrderId: "",
        proofUrl: "",
        remark: "",
      },
      receiveData: {
        salesOrderId: "",
        proofUrl: "",
        remark: "",
      },
      ticketSalesOrderId:"",
      dialogTitle: "",
      dialogVisibleReceive: false,
      dialogVisibleTicket: false,
      orderStatus:'',
      salesmansList:[],
       plans:[],
    };
  },

  computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.getOrderList();
    this.getSalesmans();
    this.getSetMeal()
    if (localStorage.checkedOrderCities == undefined) {
      this.checkedCities = [
        "订单编号",
        "客户信息",
        "下单时间",
        "套餐类型",
        "金额",
        "订单状态",
        "支付方式",
        "支付时间",
        "到期时间",
        "专属业务员",
        "付款方名称",
        "开票资料",
        "开票状态",
        "备注",
        "收款凭证",
      ];
    } else {
      this.checkedCities = localStorage.checkedOrderCities.split(",");
    }
  },
  methods: {
        handleProgiress(event, file, fileList) {
      this.progressPercent = event.percent;
    },
     getSetMeal() {
      this.$api.getPlanModuleList().then((response) => {
        this.plans = JSON.parse(JSON.stringify(response.data.result.plans));
      });
    },
    getSalesmans(){
       this.$api
        .getSalesmans()
        .then((res) => {
          if (res.data.code == "00000") {
            this.salesmansList = res.data.result;
          }
        });
    },
    changeTicket(row){
      this.ticketSalesOrderId=row.salesOrderId
      this.dialogVisibleTicket = true;
    },
    saveTicket(){
      this.$api.saveOrderTicket({
        salesOrderId:this.ticketSalesOrderId
      }).then((res) => {
        if (res.data.code == "00000") {
          this.$message.success("保存成功");
          this.dialogVisibleTicket = false;
          this.getOrderList();
        }
      });
    },
    handleCloseTicket(){
      this.dialogVisibleTicket=false
    },

    handleExceed(files, fileList) {
      this.$message.warning('如需再次上传请删除已上传的图片');
    },
    beforeUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      if (!isJPG) {
        this.$message.error("只能上传图片!");
        file = false;
        return file;
      }
      const isLt10M = file.size / 1024 / 1024 < 2;
      if (!isLt10M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        file = false;
        return file;
      }
  this.$message.warning("上传中,请稍等");
      this.loading = true;
    },
    /**
     * 图片上传成功的事件
     * @param {*}
     */
    handleProductPicSuccess(res, file) {
      if (res.code == "00000") {
        this.receiveData.proofUrl = res.result.filePath;

        this.$message.success("上传成功");
      } else {
        this.$message.error(res.message);
      }
   
        this.loading = false;
  
    },
    changeReceive(row) {
      this.receiveData.salesOrderId = row.salesOrderId;
      this.dialogVisibleReceive = true;
    },
    handelRemove(){
      this.$nextTick(() => {
        this.receiveData.proofUrl = "";
      });
    },
    saveReceive() {
      if(this.receiveData.proofUrl!=''){
        this.$api.saveOrderReceive(this.receiveData).then((res) => {
        if (res.data.code == "00000") {
          this.$message.success("保存成功");
          this.dialogVisibleReceive = false;
          this.$refs.uploadrefss.clearFiles();
          this.getOrderList();
        }
      });
      }else{
        this.$message.warning('请上传图片');
      }
      
    },
    handleCloseReceive() {
       this.$refs.uploadrefss.clearFiles();
      this.dialogVisibleReceive = false;
    },
    receiveDialogOpen() {
      this.loading = false;
      this.receiveData.proofUrl = "";
    },
    refundDialogOpen() {
      this.refundData.remark = "";
    },
    changeCacel(row) {
      this.dialogTitle = "取消订单";
      this.refundData.salesOrderId = row.salesOrderId;
      this.refundData.proofUrl = row.proofUrl;
      this.dialogVisibleRefund = true;
    },
    changeRefund(row) {
      this.dialogTitle = "线下退款";
      this.refundData.salesOrderId = row.salesOrderId;
      this.refundData.proofUrl = row.proofUrl;
      this.dialogVisibleRefund = true;
    },
    saveRefund() {
      let url = "";
      if (this.dialogTitle == "线下退款") {
        url = "saveOrderReFund";
      } else {
        url = "saveOrderCancel";
      }
      if(this.refundData.remark==''){
         this.$message.warning("请填写备注");
      }else{
         this.$api[url](this.refundData).then((res) => {
        if (res.data.code == "00000") {
          this.$message.success("保存成功");
          this.dialogVisibleRefund = false;
          this.getOrderList();
        }
      });
      }
     
    },
    handleCloseRefund() {
      this.dialogVisibleRefund = false;
    },
    async changeLog(id) {
      this.dialogVisibleLog = true;
      const res = await this.$api.getOrderLogDetail(id);
      this.tableDataLog = res.data.result;
    },
    handleCloseLog() {
      this.dialogVisibleLog = false;
    },
    handleClose() {
      this.dialogVisible = false;
      this.detailData={}
    },
    async changeInvoice(id) {
      this.dialogVisible = true;
      const res = await this.$api.getSalesOrderDetail(id);
      this.detailData = res.data.result;
    },
    async orderDownloadClick() {
      const res = await this.$api.orderUploadFile({
        condition: {
          ...this.searchForm,
        },
      });
      this.filename = decodeURIComponent(res.headers["filename"]);
      let blob = new Blob([res.data], {
        type: "application/vnd.ms-excel;charset=UTF-8",
      });
      var link = document.createElement("a");
      var href = window.URL.createObjectURL(blob);
      link.href = href;
      link.download = "订单列表";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(href);
      this.$message.success("请稍等,正在下载");
    },
    rollImg(a, index) {
      /* 获取当前页面的缩放比
            若未设置zoom缩放比，则为默认100%，即1，原图大小
        */
      var img;
      this.$refs.bigImage.forEach((item) => {
        if (item.src == index) {
          img = item;
        }
      });
      var zoom = parseInt(img.style.zoom) || 100;
      /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom
            wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动
        */
      zoom += event.wheelDelta / 12;
      /* 最小范围 和 最大范围 的图片缩放尺度 */
      if (zoom >= 100 && zoom < 250) {
        img.style.zoom = zoom + "%";
      }
      return false;
    },
    saveCustom() {
      localStorage.checkedOrderCities = this.checkedCities;
    },

    searchClick() {
      this.pageNum = 1;
      this.getOrderList();
    },
    resetClick() {
      this.$refs.searchFormRef.resetFields();
      this.searchForm.startTime=''
      this.searchForm.endTime=''
      this.pageNum = 1;
      this.getOrderList();
      
    },

    /**
     * 获取订单列表
     * @param {*}
     */
    async getOrderList() {
      this.tableLoading = true;
      await this.$api
        .orderList({
          size: this.pageSize,
          page: this.pageNum,
          condition: {
            ...this.searchForm,
          },
        })
        .then((res) => {
          if (res.data.code == "00000") {
            this.total = res.data.result.total;
            this.tableData = res.data.result.records;
            this.tableLoading = false;
          }
        });
    },
    /**
     * 切换页面大小
     * @param {*} val
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getOrderList();
    },

    /**
     * 页码切换
     * @param {*} val
     */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getOrderList();
    },
  },
};
</script>

<style lang="less" scoped>
.accountList {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  .searchBox {
    .el-row {
      display: flex;
      flex-wrap: wrap;
      .el-form-item {
        margin-bottom: 0;
      }
      .item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        .nameSpan {
          padding-right: 10px;
          box-sizing: border-box;
          white-space: nowrap;
        }
        .el-input {
          width: 162px;
        }
      }
    }
  }
  .topBtn {
    margin: 10px 0;
    text-align: right;
  }
  .addEditAccountDialog {
    .el-form-item {
      .el-select {
        width: 100%;
      }
    }
    .btns {
      text-align: right;
      margin-bottom: 0;
    }
  }
}
/deep/.el-button--success.is-plain {
  color: #fff;
  border-color: #409eff;
  background-color: #409eff;
}
/deep/.el-form-item {
  margin-bottom: 12px;
}
.content {
  height: 30vh;
  overflow-x: hidden;
  div {
    margin-top: 10px;
  }
}
.contentLog {
  height: 60vh;
  overflow-x: hidden;
  div {
    margin-top: 10px;
  }
}
/deep/.el-upload--picture-card {
  width: 400px;
  height: 270px;
}
/deep/.el-upload--picture-card i {
  margin-top: 128px;
}
.custom-style {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.el-progress {
  display: none;
  
}
</style>
